/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react'
import { Button, Form, Input,NavBar, Radio} from 'antd-mobile'
import axios from "axios"
import { useNavigate } from 'react-router-dom'
import './index.css'
export default function Login() {
  const navigate = useNavigate();
  // 登陆的回调处理函数-login
 const login = (values)=>{
  const data = values
      axios({
        method: 'post',
        url: '/api/login',
        data: {
          "telphone":data.telphone,
          "password":data.password
        }
      })
      .then(res => {
          console.log(res)
          if(res.status === 0){
            localStorage.setItem('token', res.token)
            navigate('/home')
          }
         
      }
        )
      .catch(err=>{console.log(err)})
      }

  const back = ()=>{

  }
  return (
    <div className='login-container'>
        <NavBar onBack={back}></NavBar>
        {/* 登陆标题 */}
        <div className="login-header">
            <h2>密码登录</h2>
        </div>
        {/* 登陆from表单 */}
        <div className='login-form'>
            <Form layout='horizontal'
                  name='form'
                  onFinish={login}
                  footer={
                    <Button block type='submit' color='primary'>登录</Button>
                  }>
              <Form.Item label='手机号' name='telphone' rules={[{require: true},{message:'手机号不能为空'}]}>
                <Input placeholder='请输入用户名' clearable />
              </Form.Item>
              <Form.Item label='密码' name='password'rules={[{require: true},{message:'密码不能为空'}]} >
                <Input placeholder='请输入密码' clearable type='password' />
              </Form.Item>
            </Form>
        </div>
      
       {/* 隐私协议 */}
      <div className='login-privacy'>
        <Radio>我已阅读并同意
           <a>《用户协议》</a>
          <a>《隐私政策》</a>
          </Radio>
      </div>
    </div>
  )
}
